<template>
  <div class="app-container fix-navbar-overlay">
    <NavBar>
      <template #left> 通讯录 </template>
      <template #right>
        <img
          @click="handleFindIconClick"
          src="/images/icon/find.svg"
          alt=""
        />
        <img
          @click="handlePlusIconClick"
          src="/images/icon/plus.svg"
          alt=""
        />
      </template>
    </NavBar>

    <CellGroup>
      <Cell>
        <template #left>
          <img src="/images/icon/new-friend.svg" alt="" />
        </template>
        新的朋友
      </Cell>
      <Cell>
        <template #left>
          <img src="/images/mock/头像_u1709-0.svg" alt="" />
        </template>
        群聊
      </Cell>
      <Cell>
        <template #left>
          <img src="/images/mock/头像_u1794.svg" alt="" />
        </template>
        标签
      </Cell>
      <Cell>
        <template #left>
          <img src="/images/mock/头像_u1709-3.svg" alt="" />
        </template>
        公众号
      </Cell>
    </CellGroup>

    <CellGroup label="星标朋友">
      <Cell
        v-for="(starfriend, index) in starfriends"
        :key="starfriend.nickname + index"
      >
        <template #left>
          <img :src="starfriend.avatar" alt="" />
        </template>
        {{ starfriend.nickname }}
      </Cell>
    </CellGroup>

    <CellGroup label="A">
      <Cell
        v-for="(Afriend, index) in Afriends"
        :key="Afriend.nickname + index"
      >
        <template #left>
          <img :src="Afriend.avatar" alt="" />
        </template>
        {{ Afriend.nickname }}
      </Cell>
    </CellGroup>

    <CellGroup label="B">
      <Cell
        v-for="(Bfriend, index) in Bfriends"
        :key="Bfriend.nickname + index"
      >
        <template #left>
          <img :src="Bfriend.avatar" alt="" />
        </template>
        {{ Bfriend.nickname }}
      </Cell>
    </CellGroup>
  </div>
</template>

<script>
import NavBar from "src/components/NavBar.vue"
export default {
  data: function () {
    return {
      starfriends: [
        {
          avatar: "/images/mock/头像_u1801.svg",
          nickname: "一二三四",
        },
        {
          avatar: "/images/mock/头像_u1801-0.svg",
          nickname: "琪琪",
        },
      ],
      Afriends: [
        {
          avatar: "/images/mock/头像_u1675.svg",
          nickname: "啊啊啊",
        },
        {
          avatar: "/images/mock/头像_u1675-0.svg",
          nickname: "AA有约",
        },
        {
          avatar: "/images/mock/头像_u1675-1.svg",
          nickname: "安心",
        },
        {
          avatar: "/images/mock/头像_u1665-1.svg",
          nickname: "安静",
        },
        {
          avatar: "/images/mock/头像_u1665-0.svg",
          nickname: "安逸",
        },
      ],
      Bfriends: [
        {
          avatar: "/images/mock/p4.jpg",
          nickname: "白天黑夜",
        },
        {
          avatar: "/images/mock/p5.jpg",
          nickname: "班干部",
        },
        {
          avatar: "/images/mock/p24.jpg",
          nickname: "波波",
        },
        {
          avatar: "/images/mock/p23.jpg",
          nickname: "表哥",
        },
        {
          avatar: "/images/mock/p25.jpg",
          nickname: "标标",
        },
      ],
    }
  },
  components: {
    NavBar,
  },
  methods: {
    handleFindIconClick() {
      console.log("find icon click")
    },
    handlePlusIconClick() {
      console.log("plus icon click")
    },
  },
}
</script>

<style lang="scss" scoped>
.left-box img {
  width: 38px;
  height: 38px;
  border-radius: 5px;
}
</style>
